<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link
      rel="stylesheet"
      href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"
    />
    <link
      rel="stylesheet"
      href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"
    />
    <style type="text/css">
      a {
        display: inline-block;
      }

      body,
      html,
      #allmap {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
        font-size: 14px;
      }

      .box {
        position: absolute;
        top: 8px;
        right: 250px;
        cursor: pointer;
      }

      .preserve {
        padding: 8px;
        border-radius: 2px;
        border: 1px solid #ddd;
        background: #fff;
        color: #204d74;
        box-shadow: 0 0 1px 1px #ddd;
        cursor: pointer;
      }

      .overClick {
        position: absolute;
        bottom: 100px;
        left: 50%;
        display: flex;
        justify-content: center;
        transform: translate(-50%, 0);
        display: none;
      }

      .overClick div {
        width: 200px;
        height: 50px;
        color: blue;
        margin: 0 20px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid skyblue;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        user-select: none;
      }

      .input_button {
        position: absolute;
        top: 10px;
        left: 10px;
      }
      .box1 {
        margin: 24px;
        padding-bottom: 24px;
      }
      .init {
        min-height: 100px;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <div id="allmap"></div>
    <div class="box1">
      <div>结果数据：</div>
      <div class="init"></div>
    </div>

    <div class="input_button">
      <input type="text" id="map_search" placeholder="请输入要定位的城市" />
      <button id="btn">辅助定位</button>
    </div>
    <div class="box">
      <a href="#">
        <button class="preserve">保存</button>
      </a>
    </div>
    <div class="overClick">
      <div>打开编辑</div>
      <div>取消编辑</div>
    </div>
  </body>
  <!--申请的key值-->
  <script
    type="text/javascript"
    src="http://api.map.baidu.com/api?v=2.0&ak=Zz0EKyElI1WyUhROLDeGgheP74pTVfG3"
  ></script>
  <!--加载鼠标绘制工具-->
  <script
    type="text/javascript"
    src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"
  ></script>
  <!--加载检索信息窗口-->
  <script
    type="text/javascript"
    src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"
  ></script>
  <script
    src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"
    type="text/javascript"
  ></script>
  <script type="text/javascript">
    $(function () {
      let overlayDom = null;
      var overlays = []; //保存面覆盖物的个数
      var coverlays = []; //保存点覆盖物的个数
      // 百度地图初始化
      var map = new BMap.Map("allmap", {
        enableMapClick: false,
      });
      map.centerAndZoom("北京市", 12);
      map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
      map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
      map.setMapStyle({
        styleId: "501ab5493ac8dcb0a892718692c8a07a",
      });
      var bmap = {
        drawingManager: "",
        styleOptions: {
          strokeColor: "blue", //边线颜色。
          fillColor: "", //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 3, //边线的宽度，以像素为单位。
          strokeOpacity: 1, //边线透明度，取值范围0 - 1。
          fillOpacity: 0, //填充的透明度，取值范围0 - 1。
          strokeStyle: "solid", //边线的样式，solid或dashed。
        },

        /*------实例化-----*/
        init: function () {
          var styleOptions = this.styleOptions;
          map.enableScrollWheelZoom();
          //实例化鼠标绘制工具
          this.drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
              anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
              offset: new BMap.Size(5, 5), //偏离值
              scale: 0.8, //工具栏缩放比例
              drawingModes: [
                //工具栏上可以选择出现的绘制模式
                BMAP_DRAWING_POLYGON,
                BMAP_DRAWING_POLYLINE,
              ],
            },
            polygonOptions: styleOptions, //多边形的样式
          });
          //添加鼠标绘制工具监听事件，用于获取绘制结果
          this.drawingManager.addEventListener(
            "overlaycomplete",
            bmap.overlaycomplete
          );
        },
        overlaycomplete: function (e) {
          console.log(32423424);
          overlayDom = e.overlay;
          $(".overClick").css({ display: "flex" });
          overlays.push(e.overlay);
        },
      };
      bmap.init();

      //点击保存面的经纬度
      $(".preserve").on("click", function (e) {
        //获取多边形的全部经纬度
        for (var i = 0; i < overlays.length; i++) {
          overlay.disableEditing(); //关闭编辑多边形
        }
        $(".init").text(
          JSON.stringify(overlays.map((el) => el.getPath()).flat(Infinity))
        );
        console.log(
          JSON.stringify(overlays.map((el) => el.getPath()).flat(Infinity))
        );
      });

      $("#btn").on("click", () => {
        map.setCenter($("#map_search").val());
        console.log($("#map_search").val());
      });
      $(".overClick div").each(function (index) {
        $(this).on("click", () => {
          // 编辑
          if (index == 0) {
            overlayDom.enableEditing();
          }

          // 关闭编辑
          if (index == 1) {
            overlayDom.disableEditing();
          }
        });
      });
    });
    //点击信息框里面的保存
    function preserve() {
      alert(2);
      var Mc = $("input[name=Name]").val(); //获取信息框里面的名称
      console.log(Mc);
    }
  </script>
</html>
